<template>
	<view>
		<!-- //标题 -->
		<!-- 	<view class="top-box tn-cool-bg-color-15--reverse center">
			<view class="text-lg text-bold center">未送订单统计（{{storeName}}）</view>
		</view> -->
		<view class="count_box">
			<view class="count_store" v-for="(info, index1) in orderData" :key="index1" style="color: #000000;font-weight: bold;padding: 10rpx;font-size: 40rpx;">
				<view>{{ info.ckey }}:</view>
				<view class="count_lou" v-for="(item, index2) in info.cvalue" :key="index2">
					<view style="color: #0081FF;font-weight: bold;padding: 10rpx;font-size: 30rpx;">订单号：{{ item }}</view>
					<view class="btn_box">
						<u-button class="custom-style-btn" type="success" @click="creatExOrderForOutTime(item, info.cvalue, index2)" style="margin-top: 20rpx;" size="medium">
							超时出餐
						</u-button>
						<u-button class="custom-style-btn" type="success" @click="successQsTake(item, info.cvalue, index2)" style="margin-top: 20rpx;" size="medium">
							已拿到
						</u-button>
					</view>
				</view>
			</view>
		</view>

		<!-- 消息通知 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
//时间
//引入全局变量
var app = getApp();
export default {
	data() {
		return {
			qsstatus: 0,
			timeGet: '',
			placeName: '麓南区域',
			orderList: [],
			//购物车缓存 Storage 名称
			shoppingCartStorageName: 'shopping_cart',
			//门店信息
			place: 1,
			orderData: []
		};
	},
	onLoad(options) {
		var that = this;
		console.log(options.timeGive);
		that.storeName = options.storeName;
		that.timeGet = options.timeGive;
		that.init();
	},
	onShow() {},
	methods: {
		creatExOrderForOutTime(orderId, list, index) {
			let that = this;
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/exception/creatExOrderForOutTime?orderid=' + orderId,
				success(res) {
					that.$refs.uToast.show({
						title: '成功操作！',
						type: 'success'
					});
					list.splice(index, 1);
				}
			});
		},
		successQsTake(orderId, list, index) {
			let that = this;
			console.log('hh', orderId);
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/order/successQsTake?id=' + orderId,
				success(res) {
					if (res.data.status == 200) {
						list.splice(index, 1);
						that.$refs.uToast.show({
							title: '成功操作！',
							type: 'success'
						});
					} else {
						that.$refs.uToast.show({
							title: '操作失败，请联系管理',
							type: 'error'
						});
					}
				}
			});
		},
		//开始加载
		init() {
			let that = this;
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/order/getQsForWeiSongOutQsTimeDetail?storeName=' + this.storeName + '&time=' + this.timeGet,
				success(res) {
					if (res.data.status == 200) {
						that.orderData = res.data.data;
					}
				}
			});
		},
		//订单状态改变 ：3->4
		goFinish(index) {
			let that = this;
			let idlist = that.storeOrderidlist[index].idlist;
			console.log('名字', idlist);
			for (var i = 0; i < idlist.length; i++) {
				db.collection('order')
					.doc(idlist[i])
					.update({
						data: {
							sjstatus: 3
						}
					})
					.then(res => {
						console.log('订单数据', res);
						that.storeOrder.splice(index, 1);
						that.$refs.uToast.show({
							title: '成功操作！',
							type: 'success'
						});
					});
			}
		},
		shuaxin() {
			(this.storeData = {}), (this.storeOrder = []), (this.storeOrderidlist = []), (this.louOrder = []);
			this.init();
		}
	}
};
</script>

<style>
.btn_box {
	display: flex;
	justify-content: space-between;
}
.custom-style-btn {
	background-color: #01beff;
	width: 200rpx;
}
.count_box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.count_store {
	width: 100%;
	display: flex;
	margin: 10rpx;
	border: #000000 1px solid;
	flex-direction: column;
}
.count_lou {
	width: 100%;
	margin-top: 10rpx;
	border: #00c3ff 1px solid;
}

.nullOrder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 40px auto;

	image {
		width: 283px;
		height: 200px;
	}

	.tit {
		display: flex;
		flex-direction: column;
		font-size: 16px;
		font-weight: bold;
		color: #555;
		margin-top: 6px;
	}
}

.top-box {
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.head {
	background: linear-gradient(100deg, #ffeb3b, #ffc107);
	padding-bottom: 10px;
	padding-top: 10px;

	.status {
		height: var(--status-bar-height);
	}

	.search {
		height: 40px;
		background-color: #fff;
		border-radius: 10px;
		margin: 0 15px;
		display: flex;
		align-items: center;
		padding: 0 15px;
		font-size: 14px;
		color: #888;

		i {
			font-weight: bold;
			font-size: 16px;
		}

		.tit {
			margin-left: 6px;
		}
	}
}

.tabs-box {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	// position: sticky;
	// top: calc(44px + var(--status-bar-height));
	z-index: 10;
	background-color: white;
	height: 50px;
	padding-bottom: 10px;

	.hx-tabs {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: space-evenly;

		&-item {
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 70px;
			color: #666666;

			text {
				font-size: 16px;
			}
		}

		&-active {
			color: #333333;
			font-weight: bold;
		}

		&-slider-box {
			position: absolute;
			display: flex;
			justify-content: center;
			bottom: 0;
			width: 20%;
		}

		&-slider {
			display: flex;
			background: #f6d200;
			width: 30px;
			height: 3px;
		}
	}
}

.main {
	position: relative;
	height: 100vh;
	background-color: #ffffff;

	#mainSwiper {
		background-color: #eeeeee;
		height: 100%;
		width: 100%;

		.bannerimg-box {
			border-bottom-left-radius: 10upx;
			border-bottom-right-radius: 10upx;
			padding: 15px 24rpx 7px;

			swiper {
				height: 233rpx;
				width: 699rpx;
			}

			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				overflow: hidden;

				width: 100%;
				height: 100%;

				image {
					border-radius: 8px;
					width: 100%;
				}
			}
		}

		.nullOrder {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 40px auto;

			image {
				width: 283px;
				height: 200px;
			}

			.tit {
				display: flex;
				flex-direction: column;
				font-size: 16px;
				font-weight: bold;
				color: #555;
				margin-top: 6px;
			}
		}
	}
}

.scroll-items {
	height: 100%;
}

.order-item {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin: 8px 15px;
	border-radius: 10px;
	padding: 0 15px;
}

.item-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f5f5f5;

	image {
		border-radius: 50%;
		width: 24px;
		height: 24px;
	}

	.tit {
		flex: 1;
		margin-left: 6px;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		padding-right: 40px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.right {
		font-size: 14px;
		color: #666;
	}
}

.item-center {
	display: flex;
	flex-direction: row;
	margin-top: 12px;
	color: #666;
	font-size: 14px;

	image {
		border-radius: 6px;
		height: 60px;
		width: 60px;
	}

	.right {
		flex: 1;
		margin-left: 10px;
	}
}

.item-bottom {
	display: flex;
	flex-direction: row;
	margin-top: 12px;
	margin-bottom: 15px;
	justify-content: space-around;

	.left {
		flex: 1;
	}
}

.btn {
	padding: 7px 14px;
	border: 1px solid #cdcdcd;
	font-size: 14px;
	color: #555;
	border-radius: 10px;
	transition: all 0.2s;
	background: #fff;
}

.btn:active {
	color: #888;
	background: #f1f1f1;
}

.bg-yellow {
	background: linear-gradient(100deg, #ffeb3b, #ffc107);
	border-color: #ffe635;
	font-weight: bold;
}

.bg-yellow:active {
	background: linear-gradient(100deg, #e8d536, #dda809);
}

.nullOrder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 40px auto;

	image {
		width: 283px;
		height: 200px;
	}

	.tit {
		display: flex;
		flex-direction: column;
		font-size: 16px;
		font-weight: bold;
		color: #555;
		margin-top: 6px;
	}
}

.list-item {
	margin-top: 20rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 0.5px solid #e2e2e2;
	width: 100%;

	.title {
		font-size: 35rpx;
		font-weight: bold;
	}
}

.list-item-yingye {
	margin-top: 20rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-bottom: 0.5px solid #e2e2e2;
}

.cartList_box {
	margin: 20rpx;
	border: 2px solid #dcdcdc;
}

.pop_box {
	width: 500rpx;
	height: auto;
}

.pop_btn_box {
	display: flex;
	justify-content: space-around;
}

.text-input {
	width: 100%;
	min-height: 250rpx;
	max-height: 600rpx;
	font-weight: 500;
	background-color: #999999;
}

.b-r {
	border-radius: 6px;
}

.m-t {
}

.p-bb {
	height: 1px;
	//background:  #E4E7ED;
}

.flex-rl {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.container {
	margin-left: 12px;
	margin-right: 12px;
	background-color: #ffffff;
}

.p12 {
	padding: 12px;
}

.t-top-box {
	display: flex;
}

.head {
	background: linear-gradient(to bottom, #ffc107, #f1f1f1);

	padding-top: 20px;

	.tab-box {
		position: relative;
		height: 40px;
		margin: 0 12px;

		.item {
			position: absolute;
			top: 0;
			bottom: 0;
			height: 40px;
			text-align: center;
			font-size: 14px;

			width: 50%;

			.tit-box {
				position: relative;
				height: 36px;
				line-height: 36px;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				background-color: rgba(#ffffff, 0.6);
				width: 100%;
			}
		}

		.item:first-child {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-end;
			left: 0;
		}

		.item:last-child {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: flex-end;
			right: 0;
		}

		.active {
			height: 40px;
			width: 51%;
			font-weight: bold;

			.tit-box {
				height: 40px;
				line-height: 40px;
				background-color: rgba(#ffffff, 1);
			}
		}

		.left .tit-box {
			margin-left: 12px;
			margin-right: -12px;
			padding-right: 12px;
		}

		.right .tit-box {
			margin-right: 12px;
			margin-left: -12px;
			padding-left: 12px;
		}

		.left.active .tit-box {
			margin: 0;
		}

		.right.active .tit-box {
			margin: 0;
		}

		.left.active .tit-box:after {
			content: '';
			position: absolute;
			right: -12px;
			bottom: 0;
			border-top: 12px solid transparent;
			border-right: 12px solid transparent;
			border-bottom: 36px solid #ffffff;
		}

		.right.active .tit-box:after {
			content: '';
			position: absolute;
			left: -12px;
			bottom: 0;
			border-top: 12px solid transparent;
			border-left: 12px solid transparent;
			border-bottom: 36px solid #ffffff;
		}
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffc107;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}

		.address {
			font-size: 30upx;
			color: $font-color-dark;
		}
	}

	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;

		.name {
			margin-right: 30upx;
		}
	}

	.head-bottom {
		overflow: hidden;
		background: #ffffff;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;

		.tab {
			.t-top {
				&-box {
					margin: 0;
					padding: 12px;

					.txt1 {
						font-size: 18px;
						color: #888;
					}

					.icon1 {
						margin-left: 8px;
						color: #bbb;
					}
				}

				&-box:active {
					background-color: #f5f5f5;
				}
			}

			.t-bb {
				margin: 0 12px;
				height: 0.5px;
				background-color: #e4e7ed;
			}

			.t-bottom {
				padding: 12px;

				.row1 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					//padding: 12px 0 0;
					.left {
						font-size: 14px;
						font-weight: bold;
					}

					.right {
						font-size: 14px;
						color: #ff9800;

						i {
							margin-left: 8px;
							color: #bbb;
						}
					}
				}

				.row2 {
					margin-top: 6px;
					font-size: 12px;
					color: #ff9800;
				}
			}
		}
	}

	.head-bottom.selectOne {
		border-top-left-radius: 0;
		border-top-right-radius: px;
	}

	.head-bottom.selectTow {
		border-top-left-radius: 6px;
		border-top-right-radius: 0;
	}
}

.row1 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	.tit {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
		flex: 1;
		flex-wrap: wrap;

		.zk {
			padding: 1px 3px;
			font-size: 10px;
			margin-right: 8px;
			border-radius: 4px;
			background-color: #f9221d;
			color: #ffffff;
		}
	}

	.old-price {
		padding-left: 12px;
		font-size: 14px;
		color: #888888;
		font-weight: bold;

		.lt {
			text-decoration: line-through;
		}

		.fh {
			font-size: 10px;
		}
	}

	.price {
		font-size: 16px;
		padding-left: 12px;
		color: #333333;
		font-weight: bold;

		.fh {
			font-size: 10px;
		}
	}
}

.goods-item {
	margin-top: 20px;
	display: flex;
	flex-direction: row;

	.left {
		width: 60px;
		height: 60px;

		image {
			border-radius: 4px;
			overflow: hidden;
			width: 100%;
			height: 100%;
			background-color: #f1f1f1;
		}
	}

	.right {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex: 1;
		padding-left: 14px;

		.row2 {
		}

		.row3 {
			font-size: 10px;
			color: #888888;
		}
	}
}

.goods-item:first-child {
	margin: 0;
}

.store {
	display: flex;
	flex-direction: column;

	.name {
		padding: 4px 0 0px;
		font-size: 14px;
	}

	.goods-box {
	}

	.peisong {
		.right {
			font-size: 14px;
			font-weight: bold;
		}

		.left {
			font-size: 16px;
			font-weight: bold;

			.fh {
				font-size: 10px;
			}
		}
	}

	.zhekou-box {
		.zhekou {
			display: flex;
			flex-direction: row;
			margin-top: 12px;

			.row1 {
				align-items: center;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 20px;
					line-height: 20px;

					i {
						font-size: 16px;
						color: #ff5722;
					}

					.tit {
						font-weight: bold;
						margin-left: 6px;
						font-size: 14px;
						color: #333;
					}
				}

				.right {
					.tag1 {
						font-weight: bold;
						font-size: 14px;
						color: #ff5722;
					}
				}
			}

			.row2 {
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				color: #888;
			}
		}

		.zhekou:first-child {
			margin: 0;
		}
	}

	.totalbox {
		align-items: flex-end;

		.left {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 14px;
			color: #888;

			[class*='hxicon-'] {
				color: #aaa;
				margin-left: 4px;
				font-size: 16px;
			}
		}

		.right {
			display: flex;
			flex-direction: row;
			align-items: flex-end;

			.yh {
				color: #ff5722;

				.txt {
					color: #000;
					font-size: 15px;
				}

				.fh {
					font-weight: bold;
					margin-left: 3px;
					font-size: 13px;
				}

				.num {
					font-weight: bold;
					font-size: 18px;
				}
			}

			.total {
				margin-left: 16px;
				color: #333;

				.txt {
					font-size: 15px;
				}

				.fh {
					margin-left: 3px;
					font-size: 12px;
					font-weight: bold;
				}

				.num {
					font-weight: 900;
					font-size: 22px;
				}
			}
		}
	}
}

.privacy {
	display: flex;
	flex-direction: column;

	.row1 {
		align-items: flex-end;

		.left {
			display: flex;
			flex-direction: row;
			align-items: center;

			.icon1 {
				color: #444;
				font-size: 24px;
			}

			.icon2 {
				color: #aaa;
				margin-left: 6px;
				font-size: 16px;
			}

			.txt {
				color: #333;
				margin-left: 6px;
				font-weight: bold;
				font-size: 14px;
			}
		}

		.right {
		}
	}

	.row2 {
		margin-top: 4px;
		color: #888;
		font-size: 12px;
	}

	.row3 {
		margin-top: 8px;
		font-size: 12px;
		color: #ff9800;
	}
}

.other-box {
	display: flex;
	flex-direction: column;

	.row {
		align-items: center;

		.left {
			font-size: 14px;
			color: #333;
			font-weight: bold;
			flex: 1;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: wrap;
			width: 60%;
			font-size: 14px;
			display: flex;
			flex-direction: row;
			color: #aaa;

			[class*='hxicon-'] {
				position: relative;
				top: 2px;
				font-size: 14px;
			}
		}
	}
}

.body-end {
	height: 100px;
}

.foot {
	z-index: 11;
	position: fixed;
	display: flex;
	flex-direction: row;
	border-radius: 50px;
	overflow: hidden;
	bottom: 12px;
	left: 12px;
	right: 12px;
	height: 50px;

	.left {
		padding: 0 12px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #222222;
		flex: 1;

		.price {
			display: flex;
			flex-direction: row;
			align-items: baseline;
			color: #fff;
			height: 25px;
			line-height: 25px;

			.fh {
				font-weight: bold;
				font-size: 12px;
			}

			.txt {
				font-size: 22px;
				font-weight: bold;
			}
		}

		.discount {
			margin-left: 2px;
			font-size: 10px;
			color: #bbb;
		}
	}

	.center {
		display: flex;
		align-items: center;
		background-color: #444;
		color: #ffc107;
		font-weight: bold;
		font-size: 16px;
		padding-left: 15px;
		padding-right: 15px;
		transition: all 0.3s;
	}

	.center:active {
		background-color: #666;
	}

	.right {
		display: flex;
		align-items: center;
		color: #222;
		font-weight: bold;
		font-size: 16px;
		padding-left: 15px;
		padding-right: 15px;
		transition: all 0.3s;
		background: linear-gradient(45deg, #ffeb3b, #ffc107);
	}

	.right:active {
		background: linear-gradient(45deg, #e0ce31, #e4ad06);
	}
}

.head {
	background: linear-gradient(100deg, #ffeb3b, #ffc107);
	padding-bottom: 10px;
	padding-top: 10px;

	.status {
		height: var(--status-bar-height);
	}
}

.search {
	height: 40px;
	background-color: #fff;
	border-radius: 10px;
	margin: 0 15px;
	display: flex;
	align-items: center;
	padding: 0 15px;
	font-size: 14px;
	color: #888;
}

.tabs-box {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: sticky;
	z-index: 10;
	background-color: white;
	height: 50px;
	padding-bottom: 10px;

	.hx-tabs {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: space-evenly;

		&-item {
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 70px;
			color: #666666;

			text {
				font-size: 16px;
			}
		}

		&-active {
			color: #333333;
			font-weight: bold;
		}

		&-slider-box {
			position: absolute;
			display: flex;
			justify-content: center;
			bottom: 0;
			width: 20%;
		}

		&-slider {
			display: flex;
			background: #f6d200;
			width: 30px;
			height: 3px;
		}
	}
}

.main {
	position: relative;
	background-color: #ffffff;

	#mainSwiper {
		background-color: #eeeeee;
		height: 100%;
		width: 100%;

		.bannerimg-box {
			border-bottom-left-radius: 10upx;
			border-bottom-right-radius: 10upx;
			padding: 15px 24rpx 7px;

			swiper {
				height: 233rpx;
				width: 699rpx;
			}

			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				overflow: hidden;

				width: 100%;
				height: 100%;

				image {
					border-radius: 8px;
					width: 100%;
				}
			}
		}

		.nullOrder {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 40px auto;

			image {
				width: 283px;
				height: 200px;
			}

			.tit {
				display: flex;
				flex-direction: column;
				font-size: 16px;
				font-weight: bold;
				color: #555;
				margin-top: 6px;
			}
		}

		.scroll-items {
			height: 100%;

			.order-item {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				margin: 8px 15px;
				border-radius: 10px;
				padding: 0 15px;

				.item-top {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 12px 0;
					border-bottom: 1px solid #f5f5f5;

					image {
						border-radius: 50%;
						width: 24px;
						height: 24px;
					}

					.tit {
						flex: 1;
						margin-left: 6px;
						font-size: 16px;
						font-weight: bold;
						color: #333;
						padding-right: 40px;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						flex-direction: row;
					}

					.right {
						font-size: 14px;
						color: #666;
					}
				}

				.item-center {
					display: flex;
					flex-direction: row;
					margin-top: 12px;
					color: #666;
					font-size: 14px;

					image {
						border-radius: 6px;
						height: 60px;
						width: 60px;
					}

					.right {
						flex: 1;
						margin-left: 10px;
					}
				}

				.item-bottom {
					display: flex;
					flex-direction: row;
					margin-top: 12px;
					margin-bottom: 15px;

					.left {
						flex: 1;
					}

					.btn {
						padding: 7px 14px;
						border: 1px solid #cdcdcd;
						font-size: 14px;
						color: #555;
						border-radius: 10px;
						transition: all 0.2s;
						background: #fff;
					}

					.btn:active {
						color: #888;
						background: #f1f1f1;
					}

					.bg-yellow {
						background: linear-gradient(100deg, #ffeb3b, #ffc107);
						border-color: #ffe635;
						font-weight: bold;
					}

					.bg-yellow:active {
						background: linear-gradient(100deg, #e8d536, #dda809);
					}
				}
			}
		}
	}
}
</style>
